import React, { Component } from 'react'
import TodoListItem from './TodoListItem'
import propTypes from 'prop-types'
import { Consumer } from '../../utils/context'

export default class TodoList extends Component {

  static propTypes = {
    todos: propTypes.array
  }
  //切换完成状态
  // qiehuanisok = (id) => {
  //   this.props.Qiehuanisok(id)
  // }
  //删除待办事项
  // deleteitem = (id) => {
  //   this.props.deletItem(id)
  // }
  //删除选中的待办事项
  // deletgouxuan = (ids) => {
  //   this.props.deletexz(ids)
  // }

  render() {
    return (
      <Consumer>
        {
          ({todos}) => {
            return (
              todos.length
              ?
              <div className="container">
                <ul className="columns is-mobile is-multiline">
                  {
                  todos.map(
                    todo => <TodoListItem
                    key={todo.id}
                    {...todo}
                    />
                  )
                  }
                </ul>
              </div>
              :
              <div className="container">
                待办事项列表为空，请去添加待办事项
              </div>  
            )
          }
        }
      </Consumer>
    )
  }
}
